/**
 * Created by YANFA on 2018/1/8.
 */



var myChart,mychart1;
$(function(){
    mychart1 = echarts.init(document.getElementById('khChart'));
    layui.use([ 'form', 'layer', 'table', 'element'], function () {
        var form = layui.form,
            table = layui.table, //表格
            $ = layui.jquery,
            element = layui.element; //元素操作

        form.on('select(dateValue)', function(selectData){
            backlog(selectData.value);
            customerAnalysis(selectData.value);
        });

        backlog();
        customerAnalysis();

        function backlog(dateValue) {
            var load = layer.load();
            if(dateValue==null||dateValue==undefined||dateValue==""){
                dateValue = $("#dateValue").val();
            }
            $.ajax({
                type : "post",
                async: true,
                data:{dateValue:dateValue},
                url : "/crmCustomer/crmIndex/backlog",
                dataType : "json",
                success : function(data){
                    if(data!=null){
                        $("#customerNumber").text(data['customerNumber']+"个");
                        $("#fromShareNumber").text(data['fromShareNumber']+"个");
                        $("#seePropertyNumber").text(data['seePropertyNumber']+"个");
                        $("#linkBaoBeiNumber").text(data['linkBaoBeiNumber']+"个");
                        $("#followRemindNumber").text(data['followRemindNumber']+"个");
                    }
                    layer.close(load);
                },
                error:function(){
                    layer.msg("操作异常");
                    layer.close(load);
                }
            })
        }

        function customerAnalysis(dateValue) {
            mychart1.showLoading({
                text: '正在努力加载中...'
            });
            if(dateValue==null||dateValue==undefined||dateValue==""){
                dateValue = $("#dateValue").val();
            }
            $.ajax({
                type : "post",
                async: true,
                data:{dateValue:dateValue},
                url : "/crmCustomer/crmIndex/customerAnalysis",
                dataType : "json",
                success : function(data){
                    if(data!=null){
                        initkhChart(data);
                        window.onresize = function () {
                            mychart1.resize(); //使图表适应
                        }
                    }else{
                        mychart1.hideLoading();
                    }
                },
                error:function(){
                    layer.msg("操作异常");
                    mychart1.hideLoading();
                }
            })
        }

        //展示已知数据
        var load = layer.load();
        var dataJson = {};
        dataJson['dateValue'] = $("#dateValue").val();
        var contractedCustomerList = table.render({
            elem: '#contractedCustomerList' //初始化使用dom id
            ,url : '/crmCustomer/crmIndex/contractedCustomerList'
            ,request: {
                pageName: 'page' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                ,statusCode: 1 //成功的状态码，默认：0
                ,msgName: 'msg' //状态信息的字段名称，默认：msg
                ,countName: 'total' //数据总数的字段名称，默认：count
                ,dataName: 'records' //数据列表的字段名称，默认：data
            }
            ,where:dataJson
            ,loading: true
//            ,height: 'full-200' //高度最大化减去差值
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[ //标题栏
                {field: 'customerName', title: '客户姓名', width: 140,align:'center'}
                ,{field: 'customerNo', title: '客户编号',width:140,align:'center'}
                ,{field: 'customerFollowNumber', title: '跟进次数', width: 140,align:'center'}
                ,{field: 'linkBaoBeiInfoNumber', title: '报备次数', width: 140,align:'center'}
                ,{field: 'contractPropertyAddr',title: '盘源地址', width: 170,align:'center'}
                ,{field: 'propertyUsage',title: '性质',width:140,align:'center',templet:function (d) {
                    return common.getKeyValueFieldDesc(d.propertyUsage);

                }}
                ,{field: 'dealTime',title: '成交日期',sort: true,width:170,align:'center'}
                ,{field: 'dealYeji',title: '个人业绩（元）', width: 140,align:'center'}
            ]]
//           ,skin: 'line' //表格风格
//            ,even: true
            ,page: {
                limit: 10
                ,limits: [10, 20, 30, 40, 50]
                ,curr: 1
                ,groups: 5
                ,theme: '#5FB878'
                ,first: '首页'
                ,last: '尾页'
                ,prev: '<em><i class="layui-icon">&#xe603;</i></em>'
                ,next: '<em><i class="layui-icon">&#xe602;</i></em>'
                ,layout: [ 'prev', 'page', 'next', 'skip','count', 'limit']
            },done: function(res, curr, count){
                layer.close(load);
            }
        });
    });


})



function inityjChart(){
    myChart = echarts.init(document.getElementById('yjChart'));
    myChart.showLoading({
        text: '正在努力加载中...'
    });

    var option = {
        // title : {
        //     text: '业绩目标/达标情况',
        //     subtext: '数据来自房王crm'
        // },
        tooltip : {
            trigger: 'axis',
            axisPointer : {
                type : 'shadow'
            }
        },
        // legend: {
        //     data:['达标情况']
        //
        // },
        // toolbox: {
        //     show : true,
        //     feature : {
        //         mark : {show: true},
        //         dataView : {show: true, readOnly: false},
        //         magicType: {show: true, type: ['line', 'bar']},
        //         restore : {show: true},
        //         saveAsImage : {show: true}
        //     }
        // },
        grid: {
            top:'3%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        calculable : true,
        xAxis : [
            {
                type : 'value',
                boundaryGap : [0, 0.01],
                max:100

            }
        ],
        yAxis : [
            {
                type : 'category', //类目
                data : ['量化积分','二证一委']
            }
        ],
        series : [
            {
                name: '达标情况',
                type: 'bar',
                data: [80, 90],
                barWidth : 30,
                label: {
                    normal: {
                        show: true,
                        position: 'inside',

                    }
                }

            }

        ]

    };

    myChart.on('click', function (params) {
        console.log(params);
        //TODO

    });
    myChart.setOption(option);
    myChart.hideLoading();


}

function initkhChart(data){
    //饼图
    // option = {
    //     tooltip : {
    //         trigger: 'item',
    //         formatter: "{a} <br/>{b} : {c}"
    //     },
    //     calculable : true,
    //     grid: {
    //         containLabel: true,
    //         left:20
    //     },
    //     series : [
    //         {
    //
    //             name:'客户分析',
    //             type:'pie',
    //             // radius : '65%',
    //             // center: ['25%', '55%'],
    //             data:[
    //                 {value:335, name:'成交客'},
    //                 {value:310, name:'报备客'},
    //                 {value:234, name:'跟进客'},
    //                 {value:135, name:'新增客'},
    //                 {value:1548, name:'潜在客'}
    //             ]
    //
    //         }
    //     ]
    // };
    //漏斗图
    option = {
        title: {
            // text: '漏斗图',
            // subtext: '纯属虚构'
        },
        tooltip: {
            trigger: 'item',
            // formatter: "{a} <br/>{b} : {c}"
        },

        legend: {
             // data: ['成交客','报备客','跟进客','新增客','潜在客']
        },
        calculable: true,
        series: [

            {
                type: 'funnel',
                top:'10%',
                bottom:'3%',
                funnelAlign:'center',
                //width: '70%',
                maxSize: '80%',
                label: {
                    normal: {
                        position: 'inside',
                        formatter: '{b}:{c}',
                        textStyle: {
                            color: '#000'
                        }
                    },
                    emphasis: {
                        position:'inside',
                        formatter: '{b}{c}'
                    }
                },
                itemStyle: {
                    normal: {
                        opacity: 0.6,
                        borderColor: '#fff',
                        borderWidth: 2
                    }
                },
                data: data
            }
        ]
    };

    mychart1.setOption(option);
    mychart1.hideLoading();


}